<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置表单数据</title>
<!-- 此文件为了显示Demo样式，项目中不需要引入 -->

 
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
 
</head>
<body>
  <div class="demo-content">

    <div class="row">
      <h2>表单数据---setFields()设置表单值</h2>
    </div>
    <form class="form-horizontal" id="first—form">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商编码：</label>
            <div class="controls">
              <input name="id" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商名称：</label>
            <div class="controls">
              <input name="gyName" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>
        
    </form>

    <div class="row">
      <h2>表单数据---setField() 设置表单字段</h2>
    </div>
    <form class="form-horizontal" id="first—form2">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商编码：</label>
            <div class="controls">
              <input name="id" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商名称：</label>
            <div class="controls">
              <input name="gyName" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>
        
    </form>

    <div class="row">
      <h2>表单数据---clear() 清空表单</h2>
    </div>
    <form class="form-horizontal" id="first—form3">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商编码：</label>
            <div class="controls">
              <input name="id" value="供应商编码" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商名称：</label>
            <div class="controls">
              <input name="gyName" value="供应商名称" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>
        
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
              <button type="button" id="clearBtn" class="button button-primary">清空</button>
             <!--  <button type="reset" class="button">重置</button>
            </div> -->
        </div>
    </form>

    <div class="row">
      <h2>表单数据---getField() 获取表单字段值</h2>
    </div>
    <form class="form-horizontal" id="first—form4">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商编码：</label>
            <div class="controls">
              <input name="id" value="供应商编码" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商名称：</label>
            <div class="controls">
              <input name="gyName" value="供应商名称" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>
        
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
              <button type="button" id="getFieldBtn" class="button button-primary">获取表单字段值</button>
             <!--  <button type="reset" class="button">重置</button>
            </div> -->
        </div>
    </form>

    <div class="row">
      <h2>表单数据---serializeToObject() 将表单格式化成键值对形式</h2>
    </div>
    <form class="form-horizontal" id="first—form5">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商编码：</label>
            <div class="controls">
              <input name="id" value="供应商编码" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="control-group span8">
            <label class="control-label">供应商名称：</label>
            <div class="controls">
              <input name="gyName" value="供应商名称" type="text" class="input-normal control-text">
            </div>
          </div>
        </div>
        
        <div class="row form-actions actions-bar">
            <div class="span13 offset3 ">
              <button type="button" id="btn" class="button button-primary">将表单格式化成键值对形式</button>
             <!--  <button type="reset" class="button">重置</button>
            </div> -->
        </div>
    </form>
    
 
  <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
  <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
  <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
 
<!-- script start --> 
    <script type="text/javascript">

        /**
        * 表单
        *   1、setFields() 设置表单的值  
        *       参数：
        *           1.1、data [or obj]：数据类型必须是：Object【键值对】
        *           1.2、form: HTMLElement  form标签
        *               注意：
        *                   1.1 官网demo中，通过$('form')[0] 获取指定哪一个form表单
        *                   1.2 项目中使用 $('#formIdName')  获取指定的form对象，但是这样是不行的，必须写成 $('#formIdName')[0] 的形式，才可以对对表单的值设置成功 
        *
        *   2、setField()  设置表单字段值
        *       参数：
        *           2.1 form     表单元素
        *           2.2 field    字段名
        *           2.3 value    字段值
        *
        *   3、clear()  清空表单
        *       参数：
        *           1、form      表单元素
        *
        *   4、getField()    获取表单字段值
        *       参数： 
        *           1、form      表单元素
        *           2、field     字段名
        *
        *   5、serializeToObject()    将表单格式化成键值对形式
        *       参数：
        *           1、form      表单元素
        *
        *
        * 参考链接：
        *   1、http://www.builive.com/docs/api/index.html#!/api/BUI.FormHelper-method-setFields
        *   2、http://www.builive.com/demo/form-help.php#form/set.php
        */

        BUI.use('bui/calendar',function(Calendar){
            // 第一个表单赋值案例  setFields() --设置表单值
            var data = {"id":"123","gyName":"供应商名称"};
            // var form = $('form')[0];
            var form = $('#first—form');  //赋值失败
            // BUI.FormHelper.setFields(form,data);
            BUI.FormHelper.setFields(form[0],data);
            // console.log(form);
            // console.log($('#first—form')[0]);


            // 第二个表单赋值案例  setField() --设置表单字段值
            var form2 = $('#first—form2')[0];
            BUI.FormHelper.setField(form2,"id","供应商编码");

            //清空表单
            $('#clearBtn').click(function(){
                // console.log('点击清空按钮');
                var form3 = $('#first—form3')[0];
                BUI.FormHelper.clear(form3);
            });

            //获取表单字段值
            $('#getFieldBtn').click(function(){
                var form4 = $('#first—form4')[0];
                var gyName = BUI.FormHelper.getField(form4,"gyName");
                console.log('供应商名称：' + gyName);
            });


            //将表单格式化成键值对形式
            $('#btn').click(function(){
                var form5 = $('#first—form5')[0];
                var objRes = BUI.FormHelper.serializeToObject(form5);
                console.log('格式化后的结果：');
                console.log(objRes);
            });

        });
    </script>
<!-- script end -->
  </div>
</body>
</html>